<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="../../js/封装的函数.js"></script> -->
</head>

<body>
    <div id="box">
        <p>
            <label for="user">用户名</label>
            <input type="text" id="user">
            <span id="userSpan"></span>
        </p>
        <p>
            <label for="pwd">密&emsp;码</label>
            <input type="password" id="pwd">
            <span id="pwdSpan"></span>
        </p>
        <p>
            <label for="repwd">确&emsp;认</label>
            <input type="password" id="repwd">
            <span id="repwdSpan"></span>
        </p>
        <p>
            <label for="code">验证码</label>
            <input type="text" id="code">
            <span id="createCode"></span>
            <span id="codeSpan"></span>
        </p>
        <p><input type="submit" id="btn" value="注册"></p>
    </div>
</body>
<script>
    //1.判断数据长度
function isLength(l) {
    if (l.length >= 6 && l.length <= 12) {
        return true;
    }
    return false;
}


//2.判断是否以数字开头
function isNum(firstChar) {
    if (isNaN(firstChar)) {
        return true;
    }
    return false;
}

//3.获取数字数组
function numList() {
    var numList = [];
    for (var i = 48; i <= 57; i++) {
        var char = String.fromCharCode(i); //根据编码返回对应的字符
        numList.push(char);
    }
    return numList;
}

//4.获取大写字母数组
function maxList() {
    var maxList = [];
    for (var i = 65; i <= 90; i++) {
        var char = String.fromCharCode(i); //根据编码返回对应的字符
        maxList.push(char);
    }
    return maxList;
}

//5.获取小写字母数组
function minList() {
    var minList = [];
    for (var i = 97; i <= 122; i++) {
        var char = String.fromCharCode(i); //根据编码返回对应的字符
        minList.push(char);
    }
    return minList;
}

//6.获取特殊字符
function characters(){
    var characters = ["_", "!", "$"];
    return characters;
}

//7.获取大小写数字特殊字符
function chars() {
    var chars = numList().concat(maxList(), minList(), characters());
    return chars;
}

//8.判断字符是否合法
function isContrast(arr) {
    // console.log(chars());
    // console.log(numList());
    var falg = true;
    for (var i = 0; i < arr.length; i++) {
        if (chars().indexOf(arr[i]) == -1) { //返回某个元素在数组中第一次出现的位置(下标),不存在返回-1
            falg = false;
            break;
        }
    }
    return falg;
}

//9.判断密码是否存在
function maxExistence(arr) {
    var falg = false;
    for (var i = 0; i < arr.length; i++) {
        if (maxList().indexOf(arr[i]) != -1) { //返回某个元素在数组中第一次出现的位置(下标),不存在返回-1
            falg = true;
            break;
        }
    }
    return falg;
}
function minExistence(arr) {
    var falg = false;
    for (var i = 0; i < arr.length; i++) {
        if (minList().indexOf(arr[i]) != -1) { //返回某个元素在数组中第一次出现的位置(下标),不存在返回-1
            falg = true;
            break;
        }
    }
    return falg;
}
function numExistence(arr) {
    var falg = false;
    for (var i = 0; i < arr.length; i++) {
        if (numList().indexOf(arr[i]) != -1) { //返回某个元素在数组中第一次出现的位置(下标),不存在返回-1
            falg = true;
            break;
        }
    }
    return falg;
}
function numExistence(arr) {
    var falg = false;
    for (var i = 0; i < arr.length; i++) {
        if (characters().indexOf(arr[i]) != -1) { //返回某个元素在数组中第一次出现的位置(下标),不存在返回-1
            falg = true;
            break;
        }
    }
    return falg;
}

//10.随机验证码
function myRandom(){
    var list = chars();
    var arr = [];
    var j;
    while (true) {
        j = Math.round(Math.random() * (list.length - 4));
        if (arr.indexOf(list[j]) == -1) {
            arr.push(list[j]);
        }
        if (arr.length == 4) break;
    }
    return arr.join("");
}

</script>
<script>
    var userIpt = document.getElementById("user");
    var userSpan = document.getElementById("userSpan");
    var pwdIpt = document.getElementById("pwd");
    var pwdSpan = document.getElementById("pwdSpan");
    var repwdIpt = document.getElementById("repwd");
    var repwdSpan = document.getElementById("repwdSpan");
    var codeIpt = document.getElementById("code");
    var createCode = document.getElementById("createCode");
    var codeSpan = document.getElementById("codeSpan");
    var btn = document.getElementById("btn");
    console.log(user, userSpan, pwd, pwdSpan, repwd, repwdSpan, code, createCode, codeSpan, btn);

    btn.onclick = function () {
        var user = userIpt.value.trim();
        var pwd = pwdIpt.value.trim();
        var repwd = repwdIpt.value.trim();
        var code = codeIpt.value.trim();

        var ufirstChar = user.charAt(0);
        var pfirstChar = pwd.charAt(0);

        console.log(pwd);

        //用户名
        if (!(isLength(user))) {
            userSpan.innerText = "用户名需要在6-12位之间";
            userSpan.style.fontSize = "12px";
            userSpan.style.color = "red";
        } else if (!(isNum(ufirstChar))) {
            userSpan.innerText = "用户名不能以数字开头";
            userSpan.style.fontSize = "12px";
            userSpan.style.color = "red";
        } else if (!(isContrast(user))) {
            userSpan.innerText = "用户名由数字大小写字母下划线组成";
            userSpan.style.fontSize = "12px";
            userSpan.style.color = "red";
        } else {
            userSpan.innerText = "√";
            userSpan.style.color = "green";
        }

        // 密码
        var n = 5;
        if (maxExistence(pwd)) {
            n--;
        }
        if (minExistence(pwd)) {
            n--;
        }
        if (numExistence(pwd)) {
            n--;
        }
        if (characters(pwd)) {
            n--;
        }

        if (!(isLength(pwd))) {
            pwdSpan.innerText = "密码需要在6-12位之间";
            pwdSpan.style.fontSize = "12px";
            pwdSpan.style.color = "red";
        } else if (!(isContrast(pwd))) {
            pwdSpan.innerText = "密码由数字大小写字母下划线组成";
            pwdSpan.style.fontSize = "12px";
            pwdSpan.style.color = "red";
        } else if (n == 4) {
            pwdSpan.innerText = "密码强度弱";
            pwdSpan.style.fontSize = "12px";
            pwdSpan.style.color = "green";
        } else if (n == 3) {
            pwdSpan.innerText = "密码强度中";
            pwdSpan.style.fontSize = "12px";
            pwdSpan.style.color = "green";
        } else if (n == 2) {
            pwdSpan.innerText = "密码强度强";
            pwdSpan.style.fontSize = "12px";
            pwdSpan.style.color = "green";
        } else if (n == 1) {
            pwdSpan.innerText = "密码强度超强";
            pwdSpan.style.fontSize = "12px";
            pwdSpan.style.color = "green";
        } else {
            pwdSpan.innerText = "√";
            pwdSpan.style.color = "green";
        }

        //确认密码
        if (pwd != repwd) {
            repwdSpan.innerText = "密码不一致";
            repwdSpan.style.fontSize = "12px";
            repwdSpan.style.color = "red";
        } else {
            repwdSpan.innerText = "√";
            repwdSpan.style.color = "green";
        }

        //验证码
        if (createCode.innerText != codeIpt.value) {
            codeSpan.innerText = "验证码不对";
            codeSpan.style.fontSize = "12px";
            codeSpan.style.color = "red";
        } else {
            codeSpan.innerText = "√";
            codeSpan.style.color = "green";
        }
    }

    //验证码
    createCode.innerText = myRandom();
    createCode.onclick = function () {
        createCode.innerText = myRandom();
    }

</script>


</html>